<template>
  <div class="register">
    <div class="user-photo">
      <img src="../assets/user.png" />
    </div>

    <form class="form">
      <input
        type="text"
        ref="username"
        class="username"
        placeholder="请输入手机号"
        v-model="user.username"
      />
      <input
        type="password"
        ref="userpwd"
        class="userpwd"
        placeholder="请输入密码"
        v-model="user.userpwd"
      />
      <input
        type="password"
        ref="userpwd2"
        class="confrmpwd"
        placeholder="确认密码"
        v-model="user.userpwd2"
      />
      <button class="btnLogin" @click="Register">注册</button>
    </form>

    <div class="other_login">
      <a @click="ToLogin">已有账号去登陆</a>
    </div>
    <toast v-if="show" :message="toastMessage"></toast>
  </div>
</template>

<style lang="scss" scoped>
a {
  color: rgba(0, 0, 0, 0.5);
}
.register {
  padding: 120px 40px 0 40px;

  position: relative;
  .user-photo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 66px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .form {
    margin-top: 104px;
    input {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.5);
      letter-spacing: 0;
      line-height: 24px;
      padding-left: 16px;
      width: 100%;
      height: 48px;
      border: none;
      background: #f9f9f9;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      outline: none;
    }
    .username,
    .userpwd {
      margin-bottom: 16px;
    }
    .btnLogin {
      margin-top: 32px;
      background: #0091ff;
      box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
      border-radius: 4px;

      width: 100%;
      height: 48px;
      border: none;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
      line-height: 24px;
    }
  }
  .other_login {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 16px;
    .splie {
      border-right: 1px solid rgba(0, 0, 0, 0.5);
      width: 3px;
      height: 17px;
      margin: 0 12px;
    }
    a {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.5);
      letter-spacing: 0;
    }
  }
}
</style>
<script>
import Toast from "../components/Toast.vue";

export default {
  components: { Toast },
  ceated() {
    this.userList = this.$store.state.user.userList;
  },
  data() {
    return {
      userList: [],
      show: false,
      toastMessage: "",
      user: {
        username: "",
        userpwd: "",
        useerpwd2: "",
      },
    };
  },
  methods: {
    //显示弹层信息
    showToast(message) {
      this.show = true;
      this.toastMessage = message;
      setTimeout(() => {
        this.show = false;
        this.toastMessage = "";
      }, 2000);
    },
    ToLogin() {
      this.$router.push({ name: "Login" });
    },
    Register() {
      if (this.user.username == "") {
        //用户名不能为空
        this.$refs.username.focus();
        return this.showToast("用户名不能为空!");
      }
      if (this.user.userpwd == "") {
        //密码
        this.$refs.userpwd.focus();
        return this.showToast("密码不能为空!");
      }
      if (this.user.userpwd2 == "") {
        //用户名不能为空
        this.$refs.userpwd2.focus();
        return this.showToast("确认密码不能为空!");
      }
      if (this.user.userpwd2 != this.user.userpwd) {
        //用户名不能为空
        this.$refs.userpwd2.focus();
        return this.showToast("确认密码错误!");
      }

      if (this.userList.length > 0) {
        let user = this.userList.find((item) => {
          return item.username == this.user.username;
        });

        if (user != undefined) {
          return;
        }
      }
      this.$store.commit("user/SetUserInfo", {
        user: {
          username: this.user.username,
          userpwd: this.user.userpwd,
        },
      });
      this.showToast("注册成功!");
      let that = this;
      setTimeout(() => {
        that.$router.push({ name: "Login" });
        //that.$router.push({ name: "Address" });
      }, 1000);
    
    },
  },
};
</script>